<template>
    <div>
        <div class="top">
         <h3>商品详情页面</h3>
         <p>
             <span>发布日期：2020.04.02</span>
             <span>点击次数：6次</span>
         </p>
        </div>
        <hr>
        <!-- 缩略图 -->
         <img class="preview-img" v-for="(item, index) in list" :key="item.src" :src="item.src" height="100" @click="$preview.open(index, list)">   
        <div class="wen" >
            每个函数就是一个对象（Function），函数对象都有一个子对象 
            prototype对象，类是以函数的形式来定义的。prototype表示该函
            数的原型，也表示一个类的成员的集合。
        </div>
        <com-box></com-box>
    </div>
</template>

<script>
// 导入评论的组件信息
import pinglun from '../gonggong/pinglunn.vue'
export default {
    data(){
        return {
            list:[{
                src:'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/103788210/O1CN01xY4fTs2AWEGeQ47R5_!!0-saturn_solar.jpg_460x460Q90.jpg_.webp',
                 w: 600,
                 h: 400
            },{
                src:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/420567757/O1CN01hvr8rV27Akrw9MLT3_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
                w: 1200,
                h: 900
            },
            {
                src:'https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/394695430/O1CN01ADjRJL1pyzDuhFDnN_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
                w: 1200,
                h: 900
            }]
        }
    },
    methods:{},
    components:{
        'com-box':pinglun
    }
}
</script>

<style  scoped>
.top{
    padding:0px 4px;
}
.top h3{
   font-size:16px;
   font-weight:500;
   text-align: center;
   color:#26A2FF;
   margin:10px 0px;
}
.top p{
    display:flex;
    justify-content:space-between;

}
.wen{
    font-size:14px;
    padding:10px 5px;
}
.preview-img{
    margin:5px 5px;
}
</style>